<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    {% load static %}
    <link rel="stylesheet" type="text/css" href="{% static 'book/normalize.css' %}"/>
    <link rel="stylesheet" type="text/css" href="{% static 'book/demo.css' %}"/>
    <link rel="stylesheet" type="text/css" href="{% static 'book/cs-select.css' %}"/>
    <link rel="stylesheet" type="text/css" href="{% static 'book/cs-skin-boxes.css' %}"/>
    <link rel="icon" href="{% static 'book/favicon.ico' %}" type="image/x-icon">
    <style>
        .btn {
            position: absolute;
            right: 40px;
            bottom: 40px;
            background-color: rgb(39, 143, 247);
            background-image: none;
            border-bottom-color: rgb(255, 255, 255);
            border-bottom-style: none;
            border-bottom-width: 0px;
            border-image-repeat: stretch;
            border-image-source: none;
            border-image-width: 1;
            border-left-color: rgb(255, 255, 255);
            border-left-style: none;
            border-left-width: 0px;
            border-right-color: rgb(255, 255, 255);
            border-right-style: none;
            border-right-width: 0px;
            border-top-color: rgb(255, 255, 255);
            border-radius: 4px;
            border-top-style: none;
            border-top-width: 0px;
            box-sizing: border-box;
            color: rgb(255, 255, 255);
            cursor: pointer;
            display: block;
            font-family: sans-serif, Verdana;
            font-feature-settings: normal;
            font-kerning: auto;
            font-language-override: normal;
            font-optical-sizing: auto;
            font-size: 17.5px;
            font-size-adjust: none;
            font-stretch: 100%;
            font-style: normal;
            font-variant-alternates: normal;
            font-variant-caps: normal;
            font-variant-east-asian: normal;
            font-variant-ligatures: normal;
            font-variant-numeric: normal;
            font-variant-position: normal;
            font-variation-settings: normal;
            font-weight: 400;
            line-height: 25px;
            margin-bottom: 10px;
            margin-right: 10px;
            padding: 10px 25px;
            text-align: center;
            touch-action: manipulation;
            transition-delay: 0s, 0s;
            transition-duration: 0.3s, 0.3s;
            transition-property: box-shadow, border;
            transition-timing-function: ease, ease;
            user-select: none;
            vertical-align: middle;
            white-space: nowrap;
            width: 200px
        }
    </style>
    <title>选择场地</title>
</head>
<body class="color-6">
<div class="container">
    <header class="codrops-header">
        <h1>选择场地</h1>
    </header>
    <form method="post" action="/book/{{ stu_id }}/field/" id=fm2"">
    {% csrf_token %}
        <section>
            <label class="select-label">选择球场:
                <select class="cs-select cs-skin-boxes" name="s_field">
                    <option value="1" data-class="color-588c75" checked>羽毛球1</option>
                    <option value="2" data-class="color-b0c47f">羽毛球2</option>
                    <option value="3" data-class="color-f3e395">羽毛球3</option>
                    <option value="4" data-class="color-f3ae73">羽毛球4</option>
                    <option value="5" data-class="color-da645a">羽毛球5</option>
                    <option value="6" data-class="color-79a38f">羽毛球6</option>
                    <option value="7" data-class="color-c1d099">羽毛球7</option>
                    <option value="8" data-class="color-f5eaaa">羽毛球8</option>
                    <option value="9" data-class="color-f5be8f">羽毛球9</option>
                    <option value="10" data-class="color-e1837b">羽毛球10</option>
                    <option value="11" data-class="color-9bbaab">羽毛球11</option>
                    <option value="12" data-class="color-d1dcb2">羽毛球12</option>
                </select>
            </label>
        </section>
        <div>
            <style>
                li {
                    width: 120px;
                    position: relative;
                    display: inline-list-item;
                    padding: 2px 2px;
                    border: 1px solid;
                }
            </style>
            <label style="color: red">还有时间段的场地有：</label>&nbsp;
            <ul>
                {% for s in selected_field %}
                    <li><span style="color: #2b2b2b">{{ s }}</span></li>
                {% endfor %}
            </ul>
        </div>
        <div>
            <section class="row btn-row">
                <input type="hidden" name="execution" value="e2s1"><input type="hidden" name="_eventId"
                                                                          value="submit"><input
                    type="hidden" name="geolocation"><input class="btn btn-submit btn-block" name="submit"
                                                            accesskey="l" value=">>>选择时间" tabindex="6"
                                                            type="submit"></section>
        </div>
    </form>
</div>
<script src="{% static 'book/classie.js' %} "></script>
<script src="{% static 'book/selectFx.js' %}"></script>
<script>
    (function () {
        [].slice.call(document.querySelectorAll('select.cs-select')).forEach(function (el) {
            new SelectFx(el);
        });
    })();
</script>
</body>
</html>